import { createContext, useContext } from 'react'

// 作用：useContext，在函数组件中，获取 Context 中的值。需要配合 Context 一起使
// useContext Hook 与 <Context.Consumer> 的区别：获取数据的位置不同，
//    1. <Context.Consumer>：在 JSX 中获取 Context 共享的数据。
//    2. useContext：在 JS 代码中获取 Context 的数据
const ThemeContext = createContext('亚瑟')

function App() {
  // const [color, setColor] = useState('狮心王亚瑟')
  return (
    <div>
      <h4>Context 跨组件传值</h4>
      <hr />
      {/* <ThemeContext.Provider value={color}> */}
      <Son></Son>
      {/* </ThemeContext.Provider> */}
    </div>
  )
}

function Son() {
  return (
    <div>
      <h4>子组件</h4>
      <hr />
      <Sub></Sub>
    </div>
  )
}

function Sub() {
  // 1. useContext 的参数：Context 对象，即：通过 createContext 函数创建的对象。
  // 2. useContext 的返回值：Context 中提供的 value 数据。
  const value = useContext(ThemeContext)
  return (
    <div>
      <h4>孙组件</h4>
      <p>{value}</p>
    </div>
  )
}

export default App
